<html>
  <head>
    <title>nuve里使用BindingX</title>
  </head>
  <body>
    <script>
      /*
                四、nvue里使用 BindingX

                            uni-app 是逻辑层可驶入层分离的。此时会产生两个层通信的成本。

                            比如拖动视图的元素，如果自爱逻辑层不停接收事件，因为通信损耗会产生不顺滑的体验。

                            BindingX 是 weex提供的一种预描述交互语法。有原生解析BindingX规则，按此规则处理视图层的交互和动效。

                            不再实时区js逻辑层运行和通信。


                            BindingX是一种规则，解析快，但没有js那样足够强的编程灵活性。

                            uni-app内置了 BindingX,可在 nvue 中使用 BindingX 完成复杂的动画效果。

                            
                        ★、从HBuilderX 2.3.4起， uni-app 编译模式可直接引用  uni.requrieNativcePlugin('bingdingx')模块，weex模式还需使用npm方式引用。

                        ★、BindingX demo 示例可参考 BindingX 示例里vue的相关示例，将相关vue代码拷贝到ｎｖｕｅ文件里即可。

                        注意：

                                暂时不要在expression 内使用 orgin

                        eg:

                                <template>
                                    <view class="container">
                                        <view ref="b1" class="btn" style="background-color:#6A1B9A" @click="clickBtn">
                                            <text class="text">A</text>
                                        </view>
                                        <view ref="b2" class="btn" style="background-color:#0277BD" @click="clickBtn">
                                            <text class="text">B</text>
                                        </view>
                                        <view ref="b3" class="btn" style="background-color:#FF9800" @click="clickBtn">
                                            <text class="text">C</text>
                                        </view>
                                        <view ref="main_btn" class="btn" @click="clickBtn">
                                            <image class="image" ref="main_image" src="https://gw.alicdn.com/tfs/TB1PZ25antYBeNjy1XdXXXXyVXa-128-128.png" />
                                        </view>
                                    </view>
                                </template>
                                <script>
                                    const Binding = uni.requireNativePlugin('bindingx');
                                    module.exports = {
                                        data() {
                                            return {
                                                isExpanded: false
                                            }
                                        },
                                        methods: {
                                            getEl: function(el) {
                                                if (typeof el === 'string' || typeof el === 'number') return el;
                                                if (WXEnvironment) {
                                                    return el.ref;
                                                } else {
                                                    return el instanceof HTMLElement ? el : el.$el;
                                                }
                                            },
                                            collapse: function() {
                                                let main_btn = this.getEl(this.$refs.main_btn);
                                                let main_image = this.getEl(this.$refs.main_image);
                                                let b1 = this.getEl(this.$refs.b1);
                                                let b2 = this.getEl(this.$refs.b2);
                                                let b3 = this.getEl(this.$refs.b3);
                                                let main_binding = Binding.bind({
                                                    eventType: 'timing',
                                                    exitExpression: 't>800',
                                                    props: [{
                                                        element: main_image,
                                                        property: 'transform.rotateZ',
                                                        expression: 'easeOutQuint(t,45,0-45,800)'
                                
                                                    }, {
                                                        element: main_btn,
                                                        property: 'background-color',
                                                        expression: "evaluateColor('#607D8B','#ff0000',min(t,800)/800)"
                                                    }]
                                                }, function(res) {
                                                    if (res.state === 'exit') {
                                                        Binding.unbind({
                                                            token: main_binding.token,
                                                        eventType: 'timing'
                                                        })
                                                    }
                                                });
                                                let btn_binding = Binding.bind({
                                                    eventType: 'timing',
                                                    exitExpression: 't>800',
                                                    props: [{
                                                        element: b1,
                                                        property: 'transform.translateY',
                                                        expression: "easeOutQuint(t,-150,150,800)"
                                                    }, {
                                                        element: b2,
                                                        property: 'transform.translateY',
                                                        expression: "t<=100?0:easeOutQuint(t-100,-300,300,700)"
                                                    }, {
                                                        element: b3,
                                                        property: 'transform.translateY',
                                                        expression: "t<=200?0:easeOutQuint(t-200,-450,450,600)"
                                                    }]
                                                }, function(res) {
                                                    if (res.state === 'exit') {
                                                        Binding.unbind({
                                                            token: btn_binding.token,
                                                        eventType: 'timing'
                                                        })
                                                    }
                                                })
                                            },
                                            expand: function() {
                                                let main_btn = this.getEl(this.$refs.main_btn);
                                                let main_image = this.getEl(this.$refs.main_image);
                                                let b1 = this.getEl(this.$refs.b1);
                                                let b2 = this.getEl(this.$refs.b2);
                                                let b3 = this.getEl(this.$refs.b3);
                                                let main_binding = Binding.bind({
                                                    eventType: 'timing',
                                                    exitExpression: 't>100',
                                                    props: [{
                                                        element: main_image,
                                                        property: 'transform.rotateZ',
                                                        expression: 'linear(t,0,45,100)'
                                                    }, {
                                                        element: main_btn,
                                                        property: 'background-color',
                                                        expression: "evaluateColor('#ff0000','#607D8B',min(t,100)/100)"
                                                    }]
                                                }, function(res) {
                                                    if (res.state === 'exit') {
                                                        Binding.unbind({
                                                            token: main_binding.token,
                                                        eventType: 'timing'
                                                        })
                                                    }
                                                });
                                                let btn_binding = Binding.bind({
                                                    eventType: 'timing',
                                                    exitExpression: 't>800',
                                                    props: [{
                                                        element: b1,
                                                        property: 'transform.translateY',
                                                        expression: "easeOutBounce(t,0,0-150,800)"
                                                    }, {
                                                        element: b2,
                                                        property: 'transform.translateY',
                                                        expression: "t<=100?0:easeOutBounce(t-100,0,0-300,700)"
                                                    }, {
                                                        element: b3,
                                                        property: 'transform.translateY',
                                                        expression: "t<=200?0:easeOutBounce(t-200,0,0-450,600)"
                                                    }]
                                                }, function(res) {
                                                    if (res.state === 'exit') {
                                                        Binding.unbind({
                                                            token: btn_binding.token,
                                                        eventType: 'timing'
                                                        })
                                                    }
                                                })
                                            },
                                            clickBtn: function(e) {
                                                if (this.isExpanded) {
                                                    this.collapse();
                                                } else {
                                                    this.expand();
                                                }
                                                this.isExpanded = !this.isExpanded;
                                            }
                                        }
                                    }
                                <//script>
                                <style>
                                    .container {
                                        flex: 1;
                                    }
                                    .image {
                                        width: 60px;
                                        height: 60px;
                                    }
                                    .text {
                                        color: #ffffff;
                                        font-size: 30px;
                                    }
                                    .btn {
                                        width: 100px;
                                        height: 100px;
                                        background-color: #ff0000;
                                        align-items: center;
                                        justify-content: center;
                                        position: absolute;
                                        border-radius: 50px;
                                        bottom: 25px;
                                        right: 25px;
                                    }
                                </style>


                    效果：  https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/gitc.gif
            */
    </script>
  </body>
</html>